<template>
  <div class="ybl x">
    <zbl :buttons="buttons" :tree="tree" @change="change" style="z-index:1" />
    <create :form="form" :fshow="show" @change="change" />
    <div class="ybl">
      <h2 v-text="'职员信息'" class="m10px" />
      <ybltable :value="items" :pid="current.id" @change="change" />
    </div>
  </div>
</template>

<script>
import zbl from "../components/zbl";
import create from "../components/create/userTypeA.vue";
import ybltable from "./user";
export default {
  components: { zbl, create, ybltable },
  props: ["add"],
  watch: {
    "$gd.userType"() {
      this.setTree();
    }
  },
  data() {
    return {
      buttons: [
        {
          id: 1,
          name: "新增顶级",
          Attributes: { size: "mini", type: "primary" },
          style: "",
          class: "m10px"
        },
        {
          id: 2,
          name: "新增下级",
          Attributes: { size: "mini", type: "primary", disabled: true },
          style: "",
          class: "m10px"
        },
        {
          id: 3,
          name: "新增平级",
          Attributes: { size: "mini", type: "primary", disabled: true },
          style: "",
          class: "m10px"
        },
        {
          id: 4,
          name: "修改",
          Attributes: { size: "mini", type: "primary", disabled: true },
          style: "",
          class: "m10px"
        }
      ],
      show: false,
      tree: [],
      form: {},
      defForm: { id: 0, pid: 0, name: "", other: { remarks: "" } },
      current: {},
      items: []
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.setTree();
    this.form = this.$cp(this.defForm);
    this.current = this.$cp(this.defForm);
  },
  methods: {
    getHeight() {
      this.dhf = "min-height: " + (window.innerHeight - 157) + "px;";
    },
    setTree() {
      this.tree = this.$gd.userType.arr2tree();
    },
    change(a, b, c) {
      let tmp = {};
      if (a > 0 && a < 4) this.form = this.$cp(this.defForm);
      switch (a) {
        case 1: // 新增顶级
          // 前面已经赋值.
          break;
        case 2: // 新增下级
          this.form.pid = this.current.id;
          break;
        case 3: // 新增平级
          this.form.pid = this.current.pid;
          break;
        case 4: // 修改
          this.form = this.current;
          break;
        case 101: // 选中
          this.current = b;
          this.buttons = this.buttons.map(a => {
            if (a.Attributes.disabled) a.Attributes.disabled = false;
            return a;
          });
          this.items = [];
          for (let i = 0; i < this.$gd.users.length; i++) {
            if (this.$gd.users[i].userType == this.current.id)
              this.items.push(this.$gd.users[i]);
          }
          break;
        case 201: // 新增/修改  完毕
          if (c) {
            this.$gd.userType.push(b);
            this.setTree();
          }
          break;
        case "tree": // tree被改变
          this.$gd.userType.v2item(b).pid = c;
          this.setTree();
          this.$post({
            cmd: 1,
            val: {
              token: sessionStorage.token,
              table: "userType",
              pid: c,
              where: { id: b }
            }
          });
          break;

        default:
          console.log(a, this.$cp(b), c);
          break;
      }
      if (a > 0 && a < 5) this.show = !this.show;
    }
  }
};
</script>

<style lang="less" scoped>
</style>
